<script setup>

import TreeSelectorDept from "@/components/TreeSelectorDept.vue";
import {DeleteOutlined, DeliveredProcedureOutlined, HighlightOutlined} from "@ant-design/icons-vue";
import {reactive, ref, onMounted} from "vue";
import axios, {all, Axios} from "axios";
import webConfig from "@/GlobalParas.js";
import DictQuantifySelector from "@/components/DictQuantifySelector.vue";
import DeptAdd from "./deptAdd.vue";
import {message} from "ant-design-vue";
import DeptEdit from "./deptEdit.vue";
import {DES} from "crypto-js";
import deptInfo from "./deptInfo.vue";

let firstKey = ref("");
let parentDeptId = ref("");
let dataSource = ref([]);
let alldepts = ref([]);
let isEditOpenWin = ref(false);
let deptRecordObj = reactive({})
let DeptInfoClick = ref(false);
let deptInfoObj = reactive({});
parentDeptId.value = "1";
let isOpenWin = ref(false);
firstKey.value = "1";
getDeptsInfo();
getAllDepts();
// console.log(dataSource.value);
// console.log(alldepts);

const columns = [
  {
    title: '部门序号',
    dataIndex: 'sort',
    width: '10%',
  },
  {
    title: '部门名称',
    dataIndex: 'deptName',
    width: '30%'
  },
  {
    title: '部门介绍',
    dataIndex: 'deptInfo',
    key: 'deptInfo',
    width: '40%',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: '20%',
  },
];

function nodeClick(nodeData) {
  // console.log(nodeData);
  parentDeptId.value = nodeData.key
  // console.log(parentDeptId.value);
  getDeptsInfo();
}

function getAllDepts() {
  let url = webConfig.postUrl + '/dept/getAllDepts';
  axios.post(url).then(res => {
    let depts = res.data;
    depts.sort((a, b) => a.sort - b.sort);
    alldepts.value = depts;
  })
}

function getDeptsInfo() {
  let url = webConfig.postUrl + "/dept/getDeptsByParentDeptId";
  // console.log(url);
  let params = {}
  params.parentDeptId = parentDeptId.value;
  // console.log(params);
  axios.post(url, params).then(res => {
    // console.log(res.data);
    let depts = res.data;
    depts.sort((a, b) => a.sort - b.sort);//按照部门排序顺序显示
    dataSource.value = depts;
  })
}

function handleAddOper() {

  deptRecordObj.dept_name = "";
  deptRecordObj.dept_info = "";
  deptRecordObj.tableKey = "";
  deptRecordObj.parentDeptId = "";

  isOpenWin.value = true;
}

function addDept(deptObj) {
  getAllDepts();
  let dept = {};
  // console.log(deptObj);
  dept.tableKey = crypto.randomUUID();
  dept.parentDeptId = parentDeptId.value;
  dept.deptName = deptObj.dept_name;
  dept.deptInfo = deptObj.dept_info;
  let temp = 0;
  for (let i = 0; i < alldepts.value.length; i++) {
    if (alldepts.value[i].sort > temp && alldepts.value[i].flagDel === 0) {
      // console.log(alldepts.value[i]);
      temp = alldepts.value[i].sort;
    }
  }
  dept.sort = temp + 1;
  dept.flagDel = 0;
  // console.log(dept)

  let params = {}
  params.dept = dept;

  // console.log(params)

  let url = webConfig.postUrl + "/dept/addDept"
  axios.post(url, dept, {headers: {'Content-Type': 'application/json'}}).then(res => {
    // console.log(res);
    if (res.data === "success") {
      message.success("部门添加成功。");
      getDeptsInfo();
      isOpenWin.value = false;
    } else {
      message.error(res.data);
    }
    getAllDepts();
    // console.log(dataSource);
  })
}

function getAllChild(parentDeptId, allDeptId) {
  let ret = [];
  ret.push(parentDeptId);
  for (let i = 0; i < allDeptId.length; i++) {
    if (allDeptId[i].parentDeptId === parentDeptId) {
      ret = ret.concat(getAllChild(allDeptId[i].tableKey, allDeptId));
    }
  }
  return ret;
}

function delDept(event, record) {
  // console.log(record)
  // console.log(event)
  getAllDepts();
  let temp = getAllChild(record.tableKey, alldepts.value);
  // console.log(temp);
  let url = webConfig.postUrl + "/dept/delDeptById";
  axios.post(url, temp, {
    headers: {'Content-Type': 'application/json'}
  }).then(res => {
    if (res.data === "success") {
      message.success("删除成功。");
      getDeptsInfo();
      getAllDepts();
      // console.log(dataSource);
    } else {
      message.error("删除失败。");
    }
  })
}

function handleEditDept(record) {
  // console.log(record)
  deptRecordObj.dept_name = record.deptName;
  deptRecordObj.dept_info = record.deptInfo;
  deptRecordObj.tableKey = record.tableKey;
  deptRecordObj.parentDeptId = record.parentDeptId;
  deptRecordObj.sort = record.sort;

  isEditOpenWin.value = true;
}

function editDept(deptObj) {
  let dept = {};
  dept.tableKey = deptObj.tableKey;
  dept.parentDeptId = parentDeptId.value;
  dept.deptName = deptObj.dept_name;
  dept.deptInfo = deptObj.dept_info;
  dept.sort = deptObj.sort;
  dept.flagDel = 0;
  // console.log(dept)

  let params = {}
  params.dept = dept;

  // console.log(params)

  let url = webConfig.postUrl + "/dept/editDept"
  axios.post(url, dept, {headers: {'Content-Type': 'application/json'}}).then(res => {
    // console.log(res);
    if (res.data === "success") {
      message.success("部门编辑成功。");
      getDeptsInfo();
      isEditOpenWin.value = false;
    } else {
      message.error(res.data);
    }
  })
}

function onDeptInfoClick(record) {
  // console.log(record);
  deptInfoObj = record
  // console.log(deptInfoObj.value);
  DeptInfoClick.value = true;
}
</script>

<template>
  <div style="height: 100%;background: #fff">
    <a-modal v-model:open="isOpenWin" title="业绩类型选择" width="800px" :footer="null">
      <dept-add @addInfo="addDept"></dept-add>
    </a-modal>
    <a-modal v-model:open="isEditOpenWin" title="业绩类型选择" width="800px" :footer="null">
      <dept-edit @editInfo="editDept" :deptObj_props="deptRecordObj"></dept-edit>
    </a-modal>
    <a-modal v-model:open="DeptInfoClick" title="部门信息" width="800px" :footer="null">
      <dept-info :deptInfo_props="deptInfoObj"></dept-info>
    </a-modal>
    <div class="deptContainer">
      <!-- <TreeSelectorDept @treeNodeClick="nodeClick" :data-source="alldepts" :first-key="firstKey"></TreeSelectorDept>
       实时显示 -->
      <TreeSelectorDept @treeNodeClick="nodeClick"></TreeSelectorDept>
    </div>
    <div class="contentContainer">
      <div style="margin-left: 5px;">
        <a-button type="primary" @click="handleAddOper" style="margin: 20px 0 20px 0">增加部门</a-button>
        <a-table :columns="columns" :data-source="dataSource">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'deptInfo'">
              <span class="deptInfo" @click="onDeptInfoClick(record)">{{ record.deptInfo }}</span>
            </template>
            <template v-if="column.key === 'action'">
              <a-popconfirm title="部门删除后，部门相关部门也将删除。是否继续？" ok-text="确定" cancel-text="取消"
                            @confirm="eventObj => delDept(eventObj, record)">
                <a-tag class="tagBtn" style="background: #f00" title="删除">
                  <DeleteOutlined/>
                </a-tag>
              </a-popconfirm>

              <a-tag class="tagBtn" style="background: #1c3567" title="编辑" @click="handleEditDept(record)">
                <HighlightOutlined/>
              </a-tag>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<style scoped>
::v-deep .ant-table {
  font-size: 16px;
}

.deptInfo {
  max-width: 400px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  cursor: pointer;
}

.deptInfo:hover {
  color: red;
}

.deptContainer {
  width: 300px;
  height: 100%;
  float: left;
  border-right: 1px dashed #afafaf;
  margin-right: 5px;
}

.contentContainer {
  height: 100%;
  float: left;
  width: calc(100% - 310px);
  overflow-x: hidden;
}

.tagBtn {
  padding-top: 2px;
  padding-left: 13px;
  height: 25px;
  width: 40px;
  cursor: pointer;
  color: #fff;
}
</style>